import { Component } from "react";
import { Form, Input, Button, Checkbox, message } from "antd";

import styles from "./index.module.css";
console.log("styles", styles);

export class Register extends Component {
  handleSubmit = (params) => {
    const { username, password, isAgree } = params || {};
    if (!isAgree) {
      message.warn("请先勾选同意协议！");
      return;
    }
    console.log(params);
  };
  render() {
    return (
      <div className={styles["form-wrap"]}>
        <h3>一键注册 轻松获高薪</h3>
        <Form
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={this.handleSubmit}
          onFinishFailed={console.log}
          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            name="isAgree"
            valuePropName="checked"
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Checkbox>进入即代表你已同意 《用户协议》 及 《隐私政策》</Checkbox>
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default Register;
